<template>
  <!-- 测点曲线展示 -->
  <div class="chart">
    <div class="label">单位:MPa</div>
    <div class="line">
      <NodeChart ref="chart_line" />
    </div>
  </div>
</template>

<script>
import NodeChart from "../../echart/nodechart-m.vue";
import { mapState, mapActions } from "vuex";

export default {
  data() {
    return {
      number: 0,
      nodedata: [],
      // 初始测点号
      nodenum: "point1-1-1",
      // 实测应力值
      truedata: [],
      // 预测应力值
      forecastdata: [],
      // 今日值
      todaydata: [],
      // 昨天的值
      yesterdaydata: [],
      // 总预测值
      testdata: [],
    };
  },

  computed: {
    ...mapState([
      // 数据
      "adata",
      "myData",
      "usernode",
    ]),
  },

  components: {
    NodeChart,
  },

  methods: {
    // 循环数据得到想要的值并传给模型子组件
    xunhuan(name) {
      var that = this;
      // console.log('获得的测点号码',this.nodenum);
      Object.keys(that.usernode).forEach(function (i) {
        // console.log('遍历结果',index, that.usernode[index])
        // 循环site
        that.usernode[i].value.forEach(function (value) {
          // console.log('键',index,'值',value);
          if (value.name === name) {
            // console.log('测点号',value.name,'测点结果',value.value);
            that.truedata = value.value.slice(0, 13);
            // console.log('图标数据',that.truedata);
            // 生成预测随机数
            for (i = 0; i < that.truedata.length; i++) {
              that.forecastdata[i] =
                that.truedata[i] + Math.ceil(Math.random() * 10);
            }
            that.todaydata[0] = that.truedata;
            that.todaydata[1] = that.forecastdata;
            // console.log('今日数据', that.todaydata);

            // 测试两天的值
            that.testdata[0] = that.todaydata;
            that.testdata[1] = that.todaydata;
          }
        });
      });
      this.$refs.chart_line.charts(this.testdata[0]);
    },
    //axios的actions方法卸载methods里面
    ...mapActions(["getNodeData"]),
  },

  mounted() {
    //渲染图表
    this.xunhuan(this.nodenum);
  },
};
</script>

<style>
@import url("../../style/mobilestyle/mline.css");
.el-cascader .el-input__inner {
  background-color: transparent !important;
}
</style>
